﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        /***************常用选择器**********/
        /*1.元素选择器*/
        h1 {
            background-color: blue;
        }
        /*2.后代选择器*/
        h2 span {
            color: red;
        }
        /*3.ID选择器*/
        #simpleSelector {
            padding: 10px;
        }

        #myIdSelect {
            background-color: white;
            color: blue;
        }

        /*4.类选择器*/
        .header {
            background-color: white;
            color: red;
        }
        /*5.伪类*/
        a:link {
            color:blue;
        }
        a:visited {
            color:green;
        }
        a:hover, a:focus, a:active {
            background-color: red;
        }

        /*6.伪元素选择器*/
        p.comment {
            color: blue;
        }

        /***************通用选择器**********/
        #generalSelectors  * {
            color:green;
        }
       
    </style>
</head>
<body style="margin: 0px">
    <div id="simpleSelector">
        <h1>简单选择器</h1>
        <h2>1.元素选择器: h1 </h2>
        <h2>2.后代选择器:<span>h2 span</span></h2>
        <h2 id="myIdSelect">3.id选择器 #myIdSelect</h2>
        <h2 class="header">4.类选择器 .header</h2>
        <h2 >5.伪类 a:link</h2>
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">qq</a></li>
            <li><a href="#">知乎</a></li>
        </ul>
        <h2 id="generalSelectors"><span>6.通用选择器</span></h2>
    </div>
</body>
</html>
